<template>
  <div class="wrapper">
    <el-tooltip effect="dark" content="点击更换图片" placement="top">
      <el-avatar
        shape="square"
        :size="200"
        fit="fill"
        :src="avatarImage"
        :alt="tip"
        class="avatar"
        @click.native="imageCropperShow=true"
      />
    </el-tooltip>
    <my-upload
      v-model="imageCropperShow"
      field="file"
      :width="100"
      :height="100"
      :url="uploadFileUrl"
      :params="params"
      img-format="png"
      @crop-success="cropSuccess"
      @crop-upload-success="cropUploadSuccess"
      @crop-upload-fail="cropUploadFail"
    />
  </div>
</template>

<script>
import store from '@/store'
import myUpload from 'vue-image-crop-upload'

export default {
  name: 'SingleImage',
  components: {
    myUpload
  },
  props: {
    avatarImage: {
      type: String,
      required: true
    },
    params: {
      type: Object,
      required: true
    },
    tip: {
      type: String,
      default: '图片加载失败！'
    }
  },
  data() {
    return {
      imageCropperShow: false,
      uploadFileUrl: store.getters.uploadFileUrl
    }
  },
  methods: {
    cropSuccess(imgDataUrl, field) {
      this.avatarImage = imgDataUrl
    },
    cropUploadSuccess(jsonData, field) {
      const imageName = jsonData.fileName
      this.$emit('change-image', imageName)
    },
    cropUploadFail(status, field) {
      console.log(status)
    }
  }
}
</script>

<style scoped>

.avatar {
  box-shadow: 0 5px 5px 0 #999;
  cursor: pointer;
}

</style>
